<!-- <template>
  <div class="common-layout">
    <el-container>
        <div class="q">
    <el-col :span="12">
      <el-menu default-active="2" class="el-menu-vertical-demo" :unique-opened="true" @open="handleOpen" @close="handleClose">
      <img src="../assets/logooo.png" alt="">
      <div class="bbb"></div>
      <el-menu-item index="2">
          <el-icon><icon-menu /></el-icon>
          <el-icon><Odometer /></el-icon>
          <span>
            <router-link to="/oneVue">仪表盘</router-link></span>
        </el-menu-item>
        <el-sub-menu index="a">
          <template #title>
            <el-icon><location /></el-icon>
            <el-icon><Menu /></el-icon>
            <span>常用设置</span>
          </template>
            <el-menu-item index="a-1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <router-link to="/twovue">教师管理</router-link></el-menu-item>
            <el-menu-item index="a-2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <router-link to="/Bbvue">学生管理</router-link></el-menu-item>
            <el-menu-item index="a-3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <router-link to="/Ccvue">公告管理</router-link></el-menu-item>
            <el-menu-item index="a-4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <router-link to="/Ddvue">系统配置</router-link></el-menu-item>
            <el-menu-item index="a-5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <router-link to="/Eevue">判题服务器</router-link></el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="b">
          <template #title>
            <el-icon><location /></el-icon>
            <el-icon><Aim /></el-icon>
            <span>问题</span>
          </template>
            <el-menu-item index="b-1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <router-link to="/Ffvue">问题列表</router-link></el-menu-item>
            <el-menu-item index="b-2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <router-link to="/Ggvue">增加题目</router-link></el-menu-item>
            <el-menu-item index="b-3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <router-link to="/Hhvue">导入导出题目</router-link></el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="c">
          <template #title>
            <el-icon><location /></el-icon>
            <el-icon><Trophy /></el-icon>
            <span>比赛&练习</span>
          </template>
            <el-menu-item index="c-1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <router-link to="/Iivue">比赛列表</router-link></el-menu-item>
            <el-menu-item index="c-2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <router-link to="/Jjvue">创建比赛</router-link></el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="d">
          <template #title>
            <el-icon><location /></el-icon>
            <el-icon><Collection /></el-icon>
            <span>课程</span><aside></aside>
          </template>
            <el-menu-item index="d-1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <router-link to="/Kkvue">课程列表</router-link></el-menu-item>
            <el-menu-item index="d-2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <router-link to="/Llvue">创建课程</router-link></el-menu-item>
        </el-sub-menu>
        
        <!-- <el-menu-item index="3" disabled>
          <el-icon><document /></el-icon>
          <span>Navigator Three</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon><setting /></el-icon>
          <span>Navigator Four</span>
        </el-menu-item> -->
      </el-menu>
    </el-col></div>
      <el-container style="background-color: #EDECEC;width:100%;">
          <div class="aaa">
         <el-header style="text-align: right; font-size: 12px">
        <div class="toolbar">
            <el-icon><Search /></el-icon>&nbsp;&nbsp;
            <el-icon><Share /></el-icon>&nbsp;
          <span>username</span>
          <el-dropdown>&nbsp;<el-icon><ArrowDown /></el-icon> 
            <template #dropdown>
              <el-dropdown-menu>
               
                <el-dropdown-item>logout</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div></el-header></div>
        <el-main>
          <div class="c">
          <router-view></router-view></div>
        </el-main>
        <el-footer><div class="d">
        <h5>Web前端实战开发课程版权所有</h5></div>
         </el-footer>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import {Menu,ArrowDown,Odometer,Aim,Trophy,Collection,Search,Share} from '@element-plus/icons-vue'
export default{
    data(){
        return{
            
        }
    },
    components:{
        Menu,
        ArrowDown,
        Odometer,
        Aim,
        Trophy,
        Collection,
        Search,
        Share
    }
}
</script>
<style scoped>
.el-menu-vertical-demo{
    width: 600px;
}
.q{
    width: 400px;
}
.aaa{
    height: 80px;
    background-color: #F9FAFC;
    margin-top: -60px;
}
.toolbar{
    margin-top: 30px;
}
img{
    margin-top: -30px;
}
.bbb{
    width: 400px;
    height: 80px;
}
.c{
  background-color: #fff;
}
.d{
  background-color: #EDECEC;
  width: 100%;
  height: 30px;
  padding-top: 10px;
}
.router-link-active {
  text-decoration: none;
  color: black;
}
a{
  text-decoration: none;
  color: black;
}

</style> -->